<!-- 组件说明 -->
<template>
    <div class='main'>
        <el-container>
            <el-header height="0">
                <common-header @headerclick="clickItem"></common-header>
            </el-header>
            <el-main>
                <transition name="el-fade-in-linear">
                    <common-background v-show="main"></common-background>
                </transition>
                <transition name="el-fade-in-linear">
                    <common-product v-show="product"></common-product>
                </transition>      
                <transition name="el-fade-in-linear">
                    <common-news v-show="news"></common-news>
                </transition>        
                <transition name="el-fade-in-linear">
                    <common-us v-show="about"></common-us>
                </transition>       
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import CommonHeader from '../components/common/Header'
    import CommonBackground from '../components/MainBack'
    import CommonProduct from '../components/Product'
    import CommonNews from '../components/News'
    import CommonUs from '../components/Aboutus'
    import Bus from '../request/bus'
    export default {
        components: {
            CommonHeader,
            CommonBackground,
            CommonProduct,
            CommonNews,
            CommonUs
        },
        data () {
            return {
                activeIndex: '1',
                main:true,
                product:false,
                news:false,
                about:false,
            };
        },
        computed:{
        },
        created(){
            Bus.$on("authordom", val=>{
                this.clickItem("about");
            });
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            clickItem(item){
                if(item == "main"){
                    this.main = true;
                    this.product = false;
                    this.news = false;
                    this.about = false;
                }else if(item == "prouct"){
                    this.main = false
                    this.product = true;
                    this.news = false;
                    this.about = false;
                }else if(item == "news"){
                    this.main = false
                    this.product = false;
                    this.news = true;
                    this.about = false;
                }else if(item == "about" || item == "servingcus" || item == "joinus"){
                    this.main = false
                    this.product = false;
                    this.news = false;
                    this.about = true;
                    if(item == "about"){
                        Bus.$emit("toptabclick", "1");
                    }else if(item == "servingcus"){
                        Bus.$emit("toptabclick", "2");
                    }else{
                        Bus.$emit("toptabclick", "3");
                    }
                }
            }
        },
        mounted() {

        },
        //生命周期 - 创建之前
        beforeCreate() {}, 
        //生命周期 - 挂载之前
        beforeMount() {},
        //生命周期 - 更新之前
        beforeUpdate() {}, 
        //生命周期 - 更新之后
        updated() {},
        //生命周期 - 销毁之前
        beforeDestroy() {}, 
        //生命周期 - 销毁完成
        destroyed() {}, 
        //如果页面有keep-alive缓存功能，这个函数会触发
        activated() {},
    }
</script>

<style scoped>
.el-footer{
    padding:0;
}
.el-main {
    background-color: #fff;
    color: #333;
    text-align: center;
    padding:0;
    margin-top: 2px;
    overflow: hidden;
}
.el-header{
    color: #333;
    text-align: center;
    line-height: 55px;
    padding: 0;
}
.el-header{
	background: rgb(41, 41, 41,0.1);
    color: #fff;
    z-index: 3;
}
</style>